<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="./js/rem.js"></script>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="./js/tabber.js"></script>

    
</head>


<body>
    <div id="app">
        <!-- 搜索占位 -->
        <div class="search-zhanwei"></div>
        <div class="search">
            <div class="input center">
                <img src="./images/index/sousuo.png" alt="">
                输入搜索的内容
            </div>
        </div>
        <!-- banner -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">

                    <img src="./images/index/banner.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/index/banner.png" alt="">

                </div>
                <div class="swiper-slide">
                    <img src="./images/index/banner.png" alt="">

                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- 金刚区 -->
        <div class="icons">
            <div class="icon">
                <img src="./images/index/icon1.png" alt="">
                <a href="./views/adoption.html"></a> 立即领养
            </div>
            <div class="icon">
                <img src="./images/index/icon2.png" alt="">
                <a href="./views/member.html"></a>
                会员抢购
            </div>
            <div class="icon">
                <img src="./images/index/icon3.png" alt="">
                <a href="./views/myteam.html"></a>
                我的团队
            </div>
            <div class="icon">
                <img src="./images/index/icon4.png" alt="">
                <a href="./views/invitation.html"></a>


                邀请好友
            </div>


        </div>
        <!-- 广告区 -->
        <div class="ad">
            <img src="./images/index/ad.png" alt="">
        </div>
        <!-- 四大模块 -->
        <div class="tabs">
            <div class="active">政府文件</div>
            <div>新闻咨询</div>
            <div>我的团队</div>
            <div>邀请好友</div>
        </div>
        <!-- 列表 -->
        <div class="list" id="app">
            <!-- 这里直接替换数据 不需要 v-for  -->
            <div class="list-item" v-for="item in list">
                <div class="cover"></div>
                <div class="info">
                    <div class="title">
                        iny老师教你新媒体运营
                    </div>
                    <div class="content">
                        学完轻松写出爆款文案学完轻松写出爆款文案
                        学完轻松写出爆款文案学完轻松写出爆款文案
                        学完轻松写出爆款文案
                    </div>
                    <div class="btn">
                        <a href="./views/adoption.html"></a>

                        点击查看
                    </div>
                </div>
            </div>
        </div>

        <div class="tabber">
            <div class="active">
                <img src="./images/index/home.png" alt="">
                首页
            </div>
            <div>
                <img src="./images/index/tabber2.png" alt="">
                抽奖
                        <a href="./views/choujiang.html"></a>
        
            </div>
            <div class="middle">
                <div class="tabber-add">
                    +
                </div>
                抢购
                        <a href="./views/qianggou.html"></a>
        
            </div>
            <div>
                <img src="./images/index/qiandao.png" alt="">
                签到
                        <a href="./views/qiandao.html"></a>
        
            </div>
            <div>
                <img src="./images/index/wode.png" alt="">
                我的
                        <a href="./views/user.html"></a>
        
            </div>
        </div>   
        <div class="tabber-zhanwei"></div>
    </div>

    <script>



        var app = new Vue({
            el: '#app',
            data: {
                list: [1, 2, 3, 4, 5, 67, 8, 9],
                message: 'Hello Vue!'
            },
            mounted() {
                const options = {
                    autoplay: true,
                    parallax: true,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    on: {
                        slideChange: function () {
                            console.log(this.activeIndex);
                        },
                    },
                }
                const swiper = new Swiper('.swiper', options)
            }

        })
    </script>
</body>

</html>